<template>
  <div id='ground' :style='size'>
      <div class="imageSlider">
        <transition-group name="fade" tag="div">
          <div class="imageSlider-wrapper" v-for="number in [currentNumber]" :key="number">
            <img class="imageSlider-item" :src="images[currentNumber]"
                 @mouseout="startRotation">
          </div>
        </transition-group>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'showimg',
    data () {
      return {
        images: [
          require('../img/img4.jpg'),
          require('../img/5.jpg'),
          require('../img/8.jpg'),
          require('../img/aaa.png'),
          require('../img/bbb.png'),
          require('../img/ddd.png'),
          require('../img/eee.png')
        ],
        currentNumber: 0,
        timer: null,
        size: {
          width: '100%',
          height: '100%'
        }
      }
    },
    mounted: function () {
      this.startRotation()
    },
    methods: {
      startRotation: function () {
        this.timer = setInterval(this.prev, 5000)
      },
      stopRotation: function () {
        clearTimeout(this.timer)
        this.timer = null
      },
      next: function () {
        this.currentNumber = this.currentNumber + 1 === this.images.length ? 0 : this.currentNumber += 1
      },
      prev: function () {
        this.currentNumber = this.currentNumber === 0 ? this.images.length - 1 : this.currentNumber -= 1
      }
    }
  }
</script>
<style>
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
  }
  * {
    padding: 0;
    margin: 0;
  }
  html, body {
    height: 100%;
    width: 100%;
  }
  body {
    margin: 0px;
    width: 100%;
    height: 100%;
  }
</style>
<style scoped>
  .timer {
    position: absolute;
    bottom: -100px;
  }
  #ground{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }

  .imageSlider {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .imageSlider .imageSlider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .imageSlider .imageSlider-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.8s ease;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    visibility: hidden;
  }
</style>
